/**
 * 学习目标：使用Ref获取dom元素、组件实例对象 - 与vue中 ref 作用类似
 * 作用：ref获取dom元素、组件实例对象
 * 1. 通过 React.createRef() 创建 ref 对象
 * 2. 通过 标签上的ref属性，绑定好变量
 * 3. ref对象的.current 获取到真实 组件实例/DOM对象
 */
import React from 'react';
import ReactDOM from 'react-dom';

// 1. 通过 React.createRef() 创建 ref 对象
// 可以写在组件外，那么就是全局变量，直接访问 inputRef 即可
// const inputRef = React.createRef();
// const childRef = React.createRef();

class App extends React.Component {
  state = {};
  // 也可以写在组件内，那么就是组件的变量，通过 this.inputRef 访问
  inputRef = React.createRef();
  childRef = React.createRef();

  handleClick = () => {
    // 3. ref对象的.current 获取到真实 组件实例/DOM对象
    console.log('inputRef.current -----> ', this.inputRef.current);
    this.inputRef.current.focus();
  };
  render() {
    return (
      <div>
        {/* 2. 通过 标签上的ref属性，绑定好变量 */}
        <input type="text" ref={this.inputRef} />
        <button onClick={this.handleClick}>点我获取input元素并且聚焦</button>
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
